<template>
   <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @customPaste="handlePaste"
        />
    </div>
</template>

<script>
import Vue from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { WordPasterConf } from '../../static/WordPaster/plugin/word'
import { PowerPointConf } from '../../static/WordPaster/plugin/ppt'
import { PdfConf } from '../../static/WordPaster/plugin/pdf'
import { NetImgConf } from '../../static/WordPaster/plugin/net'
import { Boot } from '@wangeditor/editor'
import { WordPaster } from '../../static/WordPaster/js/w'
import { zyCaptureConf } from '../../static/zyCapture/plugin/z'
import { zyCapture } from '../../static/zyCapture/z'
import { zyOffice } from '../../static/zyOffice/js/o'
import { ImportPdfConf } from '../../static/zyOffice/plugin/pdfimp'
import { ExportWordConf } from '../../static/zyOffice/plugin/wordexp'
import { ImportWordConf } from '../../static/zyOffice/plugin/wordimp'

const wmodule = {
  // JS 语法
  menus: [zyCaptureConf, WordPasterConf, PowerPointConf, PdfConf, NetImgConf, ImportWordConf, ExportWordConf, ImportPdfConf]
}
Boot.registerModule(wmodule)

export default Vue.extend({
  components: { Editor, Toolbar },
  data () {
    return {
      editor: null,
      html: '泽优Word一键粘贴控件（WordPaster） for wangEditor5-vue2-cli',
      toolbarConfig: {
        insertKeys: {
          index: 0,
          keys: ['zycapture', 'wordpaster', 'pptimport', 'pdfimport', 'netimg', 'importword', 'exportword', 'importpdf']
        }
      },
      editorConfig: {
        placeholder: ''
      },
      mode: 'default' // or 'simple'
    }
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    handlePaste (editor, event) {
      WordPaster.getInstance().SetEditor(editor).Paste()
      event.preventDefault()
      return false
    }
  },
  mounted () {
    WordPaster.getInstance({
      // 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
      PostUrl: 'http://localhost:811/wordpaster/ueditor1.4x/php/upload.php',
      License2: '',
      // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
      ImageUrl: '',
      // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
      FileFieldName: 'file',
      // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
      ImageMatch: ''
    })

    zyCapture.getInstance({
      config: {
        PostUrl: 'http://localhost:8891/upload.aspx',
        License2: '',
        FileFieldName: 'file',
        Fields: { uname: 'test' },
        ImageUrl: 'http://localhost:8891{url}'
      }
    })

    // zyoffice，
    // 使用前请在服务端部署zyoffice，
    // http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319c
    zyOffice.getInstance({
      word: 'http://localhost:13710/zyoffice/word/convert',
      wordExport: 'http://localhost:13710/zyoffice/word/export',
      pdf: 'http://localhost:13710/zyoffice/pdf/upload'
    })
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
